<template>
    <div>
        <el-image src="../src/assets/images/main/mainimg.png"></el-image>
        <!-- 内容 -->
        <div class="content flex">
            <div class="c_left">
                <div :class="{item, active:item.active }" v-for="item,index in navlist" :key="index" @click="selectnav(index)">{{ item.name }}</div>
            </div>
            <!-- 商超零售 -->
            <div class="c_right" v-show="page == 0">
                <div class="title">
                    <div class="h1">商超零售</div>
                </div>
                <div class="r_text">
                    <div class="text">中兴旗下两家大型连锁商超扎根南沙30载，坐落于滨海风景区核心地段，依托得天独厚的地理优势与诚信经营理念，已发展成为辐射周边20万居民的一站式生活中心。以生鲜直采、便民服务与本土特产专区为特色，连续十年荣获“南沙百姓信赖商超”称号，日均服务客流量超5000人次，见证三代人的生活记忆。</div>
                    <div class="h2">南沙街金州店</div>
                    <div class="main_images justify-start">
                        <div class="img" v-for="item,index in imglist1_1" :key="index">
                            <el-image :src=item></el-image>
                        </div>
                    </div>
                    <div class="h2">A级旅游景区东涌店</div>
                    <div class="main_images justify-start">
                        <div class="img" v-for="item,index in imglist1_2" :key="index">
                            <el-image :src=item></el-image>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 物业租赁 -->
            <div class="c_right" v-show="page == 1">
                <div class="title">
                    <div class="h1">物业租赁</div>
                </div>
                <div class="r_text">
                    <div class="text">中兴贸易整合超100万 优质物业资源，涵盖：</div>
                    <div class="text"><span class="dot"></span>智造厂房：层高8-12米/独立环评资质/双回路供电</div>
                    <div class="text"><span class="dot"></span>物流仓库：距高速入口3公里内/24小时装卸区/恒温仓储可选</div>
                    <div class="text"><span class="dot"></span>黄金铺面：日均人流量2万+商圈临街旺铺/自由分割组合</div>
                    <div class="text"><span class="dot"></span>甲级写字楼：地铁上盖商务集群/5A智能系统/共享会议中心</div>
                    <div class="null_line"> </div>
                    <div class="text">30年专业运营团队提供选址评估、改造咨询、法务支持等全周期服务，累计服务超500家企业客户，空置率长期低于行业平均水平15%。欢迎联系获取定制化租赁方案。</div>
                    <div class="h2">工业厂房</div>
                    <div class="main_images justify-start">
                        <div class="img" v-for="item,index in imglist2_1" :key="index">
                            <el-image :src=item></el-image>
                        </div>
                    </div>
                    <div class="h2">临街旺铺</div>
                    <div class="main_images justify-start">
                        <div class="img" v-for="item,index in imglist2_2" :key="index">
                            <el-image :src=item></el-image>
                        </div>
                    </div>
                    <div class="h2">智慧仓储</div>
                    <div class="main_images justify-start">
                        <div class="img" v-for="item,index in imglist2_3" :key="index">
                            <el-image :src=item></el-image>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 车辆设备 -->
            <div class="c_right" v-show="page == 2">
                <div class="title">
                    <div class="h1">车辆设备</div>
                </div>
                <div class="r_text">
                    <div class="text">中兴贸易拥有200+台专业设备矩阵，覆盖工程全场景需求：</div>
                    <div class="text">工程机械</div>
                    <div class="text"><span class="dot"></span>土方系列：挖掘机/推土机/压路机</div>
                    <div class="text"><span class="dot"></span>起重运输：50-300吨吊机/叉车/混凝土搅拌车</div>
                    <div class="text"><span class="dot"></span>特种作业：打桩机/洒水车/清障拖车</div>
                    <div class="null_line"> </div>

                    <div class="text">运输车队</div>
                    <div class="text"><span class="dot"></span>普货运输：4.2-17.5米厢式/平板货车</div>
                    <div class="text"><span class="dot"></span>特种运输：集装箱车/冷链车/危险品运输车（资质齐全）</div>
                    <div class="null_line"> </div>

                    <div class="text">配备30人专业维保团队，提供：</div>
                    <div class="text">✓ 灵活租售模式（长租/短租/以租代购）</div>
                    <div class="text">✓ 24小时应急调度响应</div>
                    <div class="text">✓ 设备保险&年检代办服务</div>
                    <div class="text">累计为粤港澳大湾区300+工程项目提供设备支持，年均出勤率达95%，助力客户降本增效！</div>
                    <div class="h2">工程机械</div>
                    <div class="main_images justify-start">
                        <div class="img" v-for="item,index in imglist3_1" :key="index">
                            <el-image :src=item></el-image>
                        </div>
                    </div>
                    <div class="h2">运输车</div>
                    <div class="main_images justify-start">
                        <div class="img" v-for="item,index in imglist3_2" :key="index">
                            <el-image :src=item></el-image>
                        </div>
                    </div>
                </div>
                <div class="r_text"></div>
            </div>
            <!-- 运输队 -->
            <div class="c_right" v-show="page == 3">
                <div class="title">
                    <div class="h1">运输队</div>
                </div>
                <div class="r_text">
                    <div class="text">中兴贸易组建80+台标准化运输车队，配备：</div>
                    <div class="text">主力车型</div>
                    <div class="text"><span class="dot"></span>普货运输：4.2-17.5米厢式/平板货车</div>
                    <div class="text"><span class="dot"></span>特种运输：40英尺集装箱车/25吨平板挂车</div>
                    <div class="text"><span class="dot"></span>工程协同：随车吊（3-20吨吊装能力）</div>
                    <div class="text"><span class="dot"></span>道路救援：重型清障车/全地形拖车</div>
                    <div class="null_line"> </div>

                    <div class="text">覆盖珠三角200+条干线运输网络，提供：</div>
                    <div class="text">✓ 零担&整车运输</div>
                    <div class="text">✓ 设备联动作业（运输+吊装+安装）</div>
                    <div class="text">✓ 紧急故障车辆拖移服务</div>
                    <div class="null_line"> </div>

                    <div class="text">十年累计安全行驶里程超500万公里，获评"广东省四星级货运企业"，24小时调度热线保障时效，让货物安全准时抵达每一程。</div>
                    <div class="h2">普通运输货车</div>
                    <div class="main_images justify-start">
                        <div class="img2" v-for="item,index in imglist4_1" :key="index">
                            <el-image :src=item.src></el-image>
                            <div class="text2">{{item.name}}</div>
                        </div>
                    </div>
                    <div class="h2">工程协同</div>
                    <div class="main_images justify-start">
                        <div class="img2" v-for="item,index in imglist4_2" :key="index">
                            <el-image :src=item.src></el-image>
                            <div class="text2">{{item.name}}</div>
                        </div>
                    </div>
                    <div class="h2">道路救援</div>
                    <div class="main_images justify-start">
                        <div class="img2" v-for="item,index in imglist4_3" :key="index">
                            <el-image :src=item.src></el-image>
                            <div class="text2">{{item.name}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import {ref, reactive} from 'vue';

const navlist = reactive([
    {
        name:'商超零售',
        active:true,
    },
    {
        name:'物业租赁',
        active:false,
    },
    {
        name:'车辆设备',
        active:false,
    },
    {
        name:'运输队',
        active:false,
    },
])

// 商超零售图片列表
const imglist1_1 = reactive([
    "../src/assets/images/main/shop01.png",
    "../src/assets/images/main/shop02.png",
    "../src/assets/images/main/shop03.png",
    "../src/assets/images/main/shop04.png",
    "../src/assets/images/main/shop05.png",
    "../src/assets/images/main/shop06.png",
    "../src/assets/images/main/shop07.png",
    "../src/assets/images/main/shop08.png",
])
const imglist1_2 = reactive([
    "../src/assets/images/main/shop09.png",
    "../src/assets/images/main/shop10.png",
    "../src/assets/images/main/shop11.png",
    "../src/assets/images/main/shop12.png",
    "../src/assets/images/main/shop13.png",
    "../src/assets/images/main/shop14.png",
    "../src/assets/images/main/shop15.png",
    "../src/assets/images/main/shop16.png",
])

// 物业租赁图片列表
const imglist2_1 = reactive([
    "../src/assets/images/main/wuye01.png",
    "../src/assets/images/main/wuye02.png",
    "../src/assets/images/main/wuye03.png",
    "../src/assets/images/main/wuye04.png",
    "../src/assets/images/main/wuye05.png",
    "../src/assets/images/main/wuye06.png",
    "../src/assets/images/main/wuye07.png",
    "../src/assets/images/main/wuye08.png",
])
const imglist2_2 = reactive([
    "../src/assets/images/main/wuye09.png",
    "../src/assets/images/main/wuye10.png",
    "../src/assets/images/main/wuye11.png",
    "../src/assets/images/main/wuye12.png",
    "../src/assets/images/main/wuye13.png",
    "../src/assets/images/main/wuye14.png",
    "../src/assets/images/main/wuye15.png",
    "../src/assets/images/main/wuye16.png",
])
const imglist2_3 = reactive([
    "../src/assets/images/main/wuye17.png",
    "../src/assets/images/main/wuye18.png",
    "../src/assets/images/main/wuye19.png",
    "../src/assets/images/main/wuye20.png",
    "../src/assets/images/main/wuye21.png",
    "../src/assets/images/main/wuye22.png",
    "../src/assets/images/main/wuye23.png",
    "../src/assets/images/main/wuye24.png",

])

// 车辆设备图片列表
const imglist3_1 = reactive([
    "../src/assets/images/main/mainimg01.png",
    "../src/assets/images/main/mainimg02.png",
    "../src/assets/images/main/mainimg03.png",
    "../src/assets/images/main/mainimg04.png",
    "../src/assets/images/main/mainimg05.png",
    "../src/assets/images/main/mainimg06.png",
    "../src/assets/images/main/mainimg07.png",
    "../src/assets/images/main/mainimg08.png",
    "../src/assets/images/main/mainimg09.png",
    "../src/assets/images/main/mainimg10.png",
    "../src/assets/images/main/mainimg11.png",
    "../src/assets/images/main/mainimg12.png",
])
const imglist3_2 = reactive([
    "../src/assets/images/main/mainimg13.png",
    "../src/assets/images/main/mainimg14.png",
    "../src/assets/images/main/mainimg15.png",
    "../src/assets/images/main/mainimg16.png",
    "../src/assets/images/main/mainimg17.png",
    "../src/assets/images/main/mainimg18.png",
    "../src/assets/images/main/mainimg19.png",
    "../src/assets/images/main/mainimg20.png",
])

// 运输队图片列表
const imglist4_1 = reactive([
    {
        name:'厢式货车',
        src:"../src/assets/images/main/yunshu01.png",
    },
    {
        name:'平板拖车',
        src:"../src/assets/images/main/yunshu02.png",
    },
    {
        name:'厢式货车',
        src:"../src/assets/images/main/yunshu03.png",
    },
    {
        name:'厢式货车',
        src:"../src/assets/images/main/yunshu04.png",
    },
])
const imglist4_2 = reactive([
    {
        name:'随车吊',
        src:"../src/assets/images/main/yunshu05.png",
    },
    {
        name:'随车吊',
        src:"../src/assets/images/main/yunshu06.png",
    },
    {
        name:'随车吊',
        src:"../src/assets/images/main/yunshu07.png",
    },
    {
        name:'随车吊',
        src:"../src/assets/images/main/yunshu08.png",
    }, 
])
const imglist4_3 = reactive([
    {
        name:'重型清障车',
        src:"../src/assets/images/main/yunshu09.png",
    }, 
    {
        name:'重型清障车',
        src:"../src/assets/images/main/yunshu10.png",
    }, 
    {
        name:'全地形拖车',
        src:"../src/assets/images/main/yunshu11.png",
    }, 
    {
        name:'重型清障车',
        src:"../src/assets/images/main/yunshu12.png",
    },  
])

let page = ref(0)

const selectnav = (index)=>{
    navlist.forEach((i)=>{
        i.active = false
    })
    navlist[index].active = true;

    page.value = index
}
</script>
<style lang="less" scoped>
@import '@/assets/css/common.css';
.content{
    padding: 80px 16%;
    .c_left{
        text-align: center;
        width: 10%;
        padding: 0 20px;
        .item{
            color: #555555;
            margin-bottom: 40px;
        }
        .item:hover{
            cursor: pointer;
        }
        .active{
            color: #EB3C03;
        }
    }
    .c_right{
        width: 89%;
        border-left: 2px solid #EEEEEE;
        padding-left: 30px;
        .title{
            margin-bottom: 10px;
            .h1{
            color: #333333;
            margin-bottom: 10px;
            font-size: 24px;
            font-weight: bold;
            text-align: center;
            }
            .h1_label{
                text-align: center;
                font-size: 14px;
                color: #222222;
            }
        }
        
        .null_line{
                height: 14px;
            }
        .r_text{
            .h2{
                height: 40px;
                line-height: 40px;
                font-size: 14px;
                color: #222222;
            }
            .text{
                color: #666666;
                font-size: 14px;
                line-height: 30px;
                .space{
                    display: inline-block;
                    width: 16px;
                }
                .dot{
                    display: inline-block;
                    background: #555555;
                    border-radius: 50%;
                    transform: translate(0,-3px);
                    width: 5px;
                    height: 5px;
                    margin: 0 5px;
                }
            }
            .item{
                .item_title{
                    margin-bottom: 6px;
                    .left{
                        text-align: center;
                        width: 100px;
                        height: 26px;
                        line-height: 26px;
                        background: #EB3C03;
                        color: #ffffffd5;
                        font-size: 14px;
                        border-radius: 5px;
                        margin-top: 10px;
                    }
                    .center{
                        background: #E4E7ED;
                        width: 15px;
                        height: 15px;
                        border-radius: 50%;
                        margin: 20px 8px 0;
                    }
                }
                .item_main{
                    border-left: 2px solid #E4E7ED;
                    margin-left: 115px;
                    padding-left: 16px;
                }
                
            }
            .main_images{
                flex-wrap: wrap;
                width: 100%;
                .img{
                    width: 24%;
                    margin-right: auto;
                    margin-bottom: 6px;
                    
                }
                .img2{
                    width: 24%;
                    margin-right: auto;
                    background: #F5F5F5;
                    .text2{
                        font-size: 14px;
                        color: #444444;
                        background: #F5F5F5;
                        width: 100%;
                        text-align: center;
                        padding-bottom: 5px;
                    }
                    
                }
                
            }
        }
    }
}
</style>